.code-card {
  @apply relative my-6 overflow-hidden rounded-md;

  font-size: 14px;

  :global {
    pre {
      @apply !m-0 !p-0;

      font-size: min(1em, 16px);
    }

    pre code {
      @apply flex flex-col;
    }

    .shiki,
    code {
      @apply !bg-transparent;
    }

    .line {
      @apply block px-5;

      & > span:last-child {
        @apply mr-5;
      }

      /* 撑开没有内容的行 */
      &::after {
        content: ' ';
      }
    }

    .highlighted,
    .diff {
      @apply relative break-all;

      &::before {
        @apply absolute left-0 top-0 h-full w-[2px];
        content: '';
      }
    }

    .diff.add {
      @apply bg-green-100 dark:bg-green-900;

      &::before {
        @apply bg-green-500;
      }

      &::after {
        content: ' +';
        @apply absolute left-0 text-green-500;
      }
    }

    .diff.remove {
      @apply bg-red-100 dark:bg-red-900;

      &::before {
        @apply bg-red-500;
      }

      &::after {
        content: ' -';
        @apply absolute left-0 text-red-500;
      }
    }

    .highlighted {
      @apply bg-accent/20;

      &::before {
        @apply bg-accent;
      }
    }
  }

  .scroll-container pre::-webkit-scrollbar-track {
    margin-left: 1rem;
    margin-right: var(--sr-margin, 0);
  }

  .scroll-container pre::-webkit-scrollbar {
    background-color: transparent !important;
  }
}
